<template>
	<z-paging ref="paging" v-model="dataList" @query="getDataList" bg-color="#F4F5FA">
		<template #top>
			<su-status-bar />
			<view class="top">

				<view class="top-box">
					<!-- <image class="nav-bg" src="@/static/images/nav_bg.png"></image> -->
					<uni-nav-bar backgroundColor="transparent" :border="false" color="#fff">
						<view class="nav-title">当前通证</view>
					</uni-nav-bar>
					<view class="assets-box" :style="customStyle">
						<view class="assets-item">
							<view style="font-weight: 550;" class="name">当前通证</view>
							<view class="value" style="margin-left: auto;color: #54C5C1;">{{balanceInfo.Token?balanceInfo.Token:0}}</view>
						</view>
						<!-- <view class="assets-item">
								<view class="value">{{balanceInfo.tokenBalance}}</view>
								<view class="name">待释放通证</view>
							</view> -->
					</view>

				</view>

			</view>

			<view class="tabs" :style="customStyle">
				<view>
					<su-tabs style="width: 50%;background: transparent;border: 0;" :list="tabMaps" lineWidth="20"
						lineColor="#527FFF" :activeStyle="{ color: '#527FFF', fontWeight: 600,
    fontsize: '28rpx' }" :scrollable="false" @change="onTabsChange" :current="currentTab"></su-tabs>
				</view>
			</view>
		</template>
		<view class="bottom">
			<view class="logs-box" :style="customStyle" v-if="dataList.length>0">
				<view style="width:100%" v-for="(item,index) in dataList" :key="item.id">
					<view class="log">
						<view class="log-left">
							<view class="operation">{{item.title}}</view>
							<view class="time">{{formatTime(item.createTime)}}</view>
						</view>
						<view class="log-right">
							<text
								:style="item.operation==3?'color: #E42121':''">{{item.operation==1?'-':item.operation==3?'+':''}}￥{{item.value}}</text>
						</view>
					</view>
					<!-- <su-line color="red" /> -->
					<view class="line" v-if="index!=dataList.length-1"></view>
				</view>
			</view>
		</view>

		<!-- <s-tabbar path="/pages/index/token" /> -->
	</z-paging>



</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue';
	import {
		onShow,

	} from '@dcloudio/uni-app';
	import assetApi from '@/sheep/api/member/asset'
	import {
		timeFormat
	} from '@/sheep/helper/index'
	const dataList = ref([])
	const paging = ref(null)
	const pageInfo = reactive({
		pageNo: 1,
		pageSize: 10,
		type: 'TOKEN',
		operation: ''
	})
	const getDataList = async (pageNo, pageSize) => {
		pageInfo.pageNo = pageNo ? pageNo : pageInfo.pageNo
		pageInfo.pageSize = pageSize ? pageSize : pageInfo.pageSize
		console.log('pageInfo', pageInfo);
		// 获取资产列表
		let res = await assetApi.getAssetDetailsLog(pageInfo)
		console.log('获取资产列表', res)
		// setTimeout(() => {
		if (res.code == 0) {
			paging.value.complete(res.data.list);
		} else {
			paging.value.complete(false);
		}
		// paging.value.complete(10);
		// }, 1000);
	}
	const balanceInfo = ref({})
	//获取通证余额
	const getTokenBalance = async () => {
		let res = await assetApi.getAssetDetails('TOKEN')
		console.log('获取通证余额', res)
		// setTimeout(() => {
		if (res.code == 0) {
			balanceInfo.value = res.data
		}

	}

	const currentTab = ref(0)
	const tabMaps = [{
			name: '全部',
			value: '',
		},
		{
			name: '收入',
			value: 'RECEIVE',
		},
		{
			name: '支出',
			value: 'CONSUMPTION',
		},

	];

	// 切换选项卡
	const onTabsChange = async (e) => {
		console.log('切换选项卡', e);
		currentTab.value = e.index;
		pageInfo.pageNo = 1
		pageInfo.operation = e.value
		// dataList.value = []
		// await getDataList()
		paging.value.reload()

	}
	//格式化时间戳
	const formatTime = (timestamp) => {
		return timeFormat(timestamp, 'yyyy-mm-dd hh:MM:ss')
	}

	const customStyle = ref('')
	const getElementStyle = () => {
		const systemInfo = uni.getSystemInfoSync()

		let windowWidth = systemInfo.windowWidth

		let styleObj = {
			width: windowWidth - 2 * 10 + 'px',

		}
		customStyle.value = styleObj
	}
	onShow(() => {

		getElementStyle()
	})
	onMounted(() => {
		getTokenBalance()
	})
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5FA;
	}


	.top {
		width: 100vw;
		// height: calc(100vw * 200.0 / 375);
		background: linear-gradient(180deg, #54C5C1 18%, rgba(255, 255, 255, 0) 80%);

	}

	.nav-bg {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: absolute;
		top: 0;
		z-index: -10;

	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.top-box {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: relative;
	}

	.assets-box {
		// width: 90%;
		// margin: 0 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		top: 50%;
		left: 50%;

		transform: translateX(-50%);

		.assets-item {
			// text-align: center;
			width: 100%;
			padding:20rpx 30rpx;
			box-sizing: border-box;
			line-height: 1.5;
			display: flex;
			align-items: center;
			.value {
				font-size: 40rpx;
				font-weight: 600;
				color: #4D7BFF;
			}

			.name {
				// font-size: 24rpx;
			}
		}

	}

	.tabs {
		width: 100%;
		margin-bottom: 20rpx;

	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logs-box {
		// margin-top: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;

		.log {
			// width: 90%;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 16rpx;
			box-sizing: border-box;
			line-height: 1.8;

			.log-left {
				font-size: 26rpx;

				.operation {
					font-weight: 550;
				}

				.time {
					font-size: 24rpx;
					color: #838383;
				}
			}

			.log-right {
				font-size: 28rpx;
				font-weight: 600;

			}
		}

		.line {
			height: 2rpx;
			width: 100%;
			background: #F1F1F1;

		}
	}
</style>